<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <title>bootstrap-table - 光年(Light Year Admin)后台管理系统模板</title>
  <link rel="icon" href="favicon.ico" type="image/ico">
  <meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
  <meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
  <meta name="author" content="yinqi">
  <link href="../../../static/css/bootstrap.min.css" rel="stylesheet">
  <link href="../../../static/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="../../../static/css/animate.css" rel="stylesheet">
  <link href="../../../static/css/style.min.css" rel="stylesheet">
  <link href="../../../static/js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
  <!--对话框-->
  <link rel="stylesheet" href="../../../static/js/jconfirm/jquery-confirm.min.css">
</head>
  
<body>

<div class="modal fade" id="add_frame" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title" id="myModalLabel">
          新增学生
        </h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal" role="form" id="add_form">
          <!--          <input type="hidden" id="id">-->
          <div class="form-group">
            <label for="studentName_add" class="col-sm-4 control-label">请输入学生姓名：</label>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="studentName_add" autocomplete="off"/>
            </div>
          </div>
          <div class="form-group" >
            <label class="col-xs-6">请选择学生性别：</label>
            <div class="col-xs-6">
              <label class="lyear-radio radio-inline radio-info" for="studentSex_select0">
                <input type="radio" id="studentSex_select0" name="studentSex_add" value="0"><span>男</span>
              </label>
              <label class="lyear-radio radio-inline radio-pink" for="studentSex_select1">
                <input type="radio" id="studentSex_select1" name="studentSex_add" value="1"><span>女</span>
              </label>
            </div>
          </div>
          <div class="form-group">
            <label for="studentPhone_add" class="col-sm-4 control-label">请输入学生电话：</label>
            <div class="col-sm-8">
              <input type="tel" class="form-control" id="studentPhone_add" autocomplete="off"/>
            </div>
          </div>

          <div class="form-group">
            <label for="studentSchool_add" class="col-sm-4 control-label">请输入学生学校：</label>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="studentSchool_add" autocomplete="off"/>
            </div>
          </div>
          <div class="form-group">
            <label for="studentMajor_add" class="col-sm-4 control-label">请输入学生专业：</label>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="studentMajor_add" autocomplete="off"/>
            </div>
          </div>

          <div class="form-group" >
            <label class="col-sm-2 control-label">请选择学生届数：</label>
            <select class="form-control" style="width: 100px" id="studentGrade_add" name="studentGrade_select">
              <option>请选择</option>
              <option value="2018">2018</option>
              <option value="2019">2019</option>
              <option value="2020">2020</option>
            </select>
          </div>
          <div class="form-group">
            <label for="direction_add" class="col-sm-4 control-label">请选择发展方向：</label>
            <select class="form-control" style="width: 100px" id="direction_add" name="direction_select">
              <option>请选择</option>
              <option value="0">考研</option>
              <option value="1">考公务员</option>
              <option value="2">就业</option>
            </select>
          </div>

          <div class="form-group">
            <label for="expectCity_add" class="col-sm-4 control-label">请输入期望就业城市：</label>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="expectCity_add" autocomplete="off"/>
            </div>
          </div>

        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="submit" class="btn btn-primary" id="add_save_btn">保存</button>
      </div>
    </div>
  </div>
</div>

<div class="container-fluid p-t-15">
  <div class="row">
    <div class="col-lg-12">
      <div class="card">
        <div class="card-header"><h4>学生管理</h4></div>
        <div class="card-body">
          <form id="search-form" class="search-bar" method="get" action="#!" role="form">

              <div class="row">
                <div class="col-xs-3">
                  <div class="input-group m-b-10">
                    <span class="input-group-addon">学生姓名</span>
                    <input type="text" class="form-control" name="studentName_search" placeholder="请输入学生姓名" aria-describedby="sizing-addon2" autocomplete="off">
                  </div>
                </div>
                <div class="col-xs-3">
                  <div class="form-group">
                    <label class="col-xs-6">学生性别</label>
                    <div class="col-xs-6">
                      <label class="lyear-radio radio-inline radio-info" for="studentSex_0">
                        <input type="radio" id="studentSex_0" name="studentSex_search" value="0" checked="checked"><span>男</span>
                      </label>
                      <label class="lyear-radio radio-inline radio-pink" for="studentSex_1">
                        <input type="radio" id="studentSex_1" name="studentSex_search" value="1"><span>女</span>
                      </label>
                    </div>
                  </div>
                </div>

                <div class="col-xs-3">
                  <div class="input-group m-b-10">
                    <span class="input-group-addon">学生电话</span>
                    <input type="tel" class="form-control" name="studentPhone_search" placeholder="请输入学生电话" aria-describedby="sizing-addon2" autocomplete="off">
                  </div>
                </div>
                <div class="col-xs-3">
                  <div class="input-group m-b-10">
                    <span class="input-group-addon">学生学校</span>
                    <input type="text" class="form-control" name="studentSchool_search" placeholder="请输入学生学校" aria-describedby="sizing-addon2" autocomplete="off">
                  </div>
                </div>
                <div class="col-xs-3">
                  <div class="input-group m-b-10">
                    <span class="input-group-addon">学生专业</span>
                    <input type="text" class="form-control" name="studentMajor_search" placeholder="请输入学生专业" aria-describedby="sizing-addon2" autocomplete="off">
                  </div>
                </div>

                <div class="col-xs-3">
                  <div class="input-group m-b-10">
                    <span class="input-group-addon">学生届数</span>
                      <select class="form-control" id="studentGrade_search" name="studentGrade_search" size="1">
                        <option>请选择</option>
                        <option value="2018">2018</option>
                        <option value="2019">2019</option>
                        <option value="2020">2020</option>
                      </select>
                  </div>
                </div>

                <div class="col-xs-3">
                  <div class="input-group m-b-10">
                    <span class="input-group-addon">发展方向</span>
                    <select class="form-control" id="direction_search" name="direction_search" size="1">
                      <option>请选择</option>
                      <option value="0">考研</option>
                      <option value="1">考公务员</option>
                      <option value="2">就业</option>
                    </select>
                  </div>
                </div>
                <div class="col-xs-3">
                  <div class="input-group m-b-10">
                    <span class="input-group-addon">期望就业城市</span>
                    <input type="text" class="form-control" name="expectCity_search" placeholder="请输入期望就业城市" aria-describedby="sizing-addon2" autocomplete="off">
                  </div>
                </div>
            </div>
          </form>

          <div id="toolbar" class="toolbar-btn-action">
            <button id="btn_add" type="button" class="btn btn-primary m-r-5">
              <span class="mdi mdi-plus" aria-hidden="true"></span>新增
            </button>
            <button id="btn_delete" type="button" class="btn btn-danger m-r-5">
              <span class="mdi mdi-window-close" aria-hidden="true"></span>删除
            </button>
            <button id="btn_search" type="button" class="btn btn-pink m-r-5">
              <span class="mdi mdi-magnify" aria-hidden="true"></span>搜索
            </button>
            <button id="btn_reset" type="button" class="btn btn-secondary">
              <span class="mdi mdi-autorenew" aria-hidden="true"></span>重置
            </button>
          </div>
          <table id="tb_students"></table>
 
        </div>
      </div>
    </div>

    
  </div>
  
</div>

<script type="text/javascript" src="../../../static/js/jquery.min.js"></script>
<script type="text/javascript" src="../../../static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../../static/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="../../../static/js/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="../../../static/js/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>

<!--行内编辑插件-->
<link href="../../../static/js/x-editable/1.5.1/bootstrap3-editable/css/bootstrap-editable.min.css" rel="stylesheet">
<script type="text/javascript" src="../../../static/js/x-editable/1.5.1/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<script type="text/javascript" src="../../../static/js/bootstrap-table/extensions/editable/bootstrap-table-editable.min.js"></script>

<script type="text/javascript" src="../../../static/js/main.min.js"></script>

<!--消息提示-->
<script src="../../../static/js/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="../../../static/js/lightyear.js"></script>

<!--对话框-->
<script src="../../../static/js/jconfirm/jquery-confirm.min.js"></script>
<script type="text/javascript">
  let token = sessionStorage.getItem("token");
  var student = {
    studentName : '',
    studentSex : '',
    studentPhone : '',
    studentSchool : '',
    studentMajor : '',
    studentGrade : '',
    direction : '',
    expectCity : ''
  };
  $("#btn_search").click(()=>{
      let studentName_search = $("input[name='studentName_search']").val();
      let studentSex_search = $("input:radio[name='studentSex_search']:checked").val();
      let studentPhone_search = $("input[name='studentPhone_search']").val();
      let studentSchool_search = $("input[name='studentSchool_search']").val();
      let studentMajor_search = $("input[name='studentMajor_search']").val();
      let studentGrade_search = $("#studentGrade_search").val();
      let direction_search = $("#direction_search").val();
      let expectCity_search = $("input[name='expectCity_search']").val();
      if(studentName_search!==''||studentSex_search!==''||
              studentPhone_search!==''||studentSchool_search!==''||studentMajor_search==''||
              studentGrade_search!==''||direction_search!=''||expectCity_search!==''){
        student = {
          studentName : studentName_search,
          studentSex : parseInt(studentSex_search),
          studentPhone : studentPhone_search,
          studentSchool:studentSchool_search,
          studentMajor:studentMajor_search,
          studentGrade:studentGrade_search,
          direction:parseInt(direction_search),
          expectCity:expectCity_search
        }
        $('#tb_students').bootstrapTable('refresh');
      }
  });

  $("#btn_reset").click(()=>{
    $("#search-form")[0].reset();
    student = {
      studentName : '',
      studentSex : '',
      studentPhone : '',
      studentSchool : '',
      studentMajor : '',
      studentGrade : '',
      direction : '',
      expectCity : ''
    };
    $('#tb_students').bootstrapTable('refresh', {pageSize:this.pageSize});
  });

    $("#btn_add").click(()=>{
      $("#add_form")[0].reset();
      $("#add_frame").modal({
        backdrop:"static"
      });
    });

    $("#add_save_btn").click(()=>{
      lightyear.loading('show');
        $.ajax({
          type: 'POST',
          url: '/ssm/student/student',
          data: JSON.stringify({
            'studentName' : $("#studentName_add").val(),
            'studentSex' : $("input:radio[name='studentSex_add']:checked").val(),
            'studentPhone' : $("#studentPhone_add").val(),
            'studentSchool' : $("#studentSchool_add").val(),
            'studentMajor' : $("#studentMajor_add").val(),
            'studentGrade' : $("#studentGrade_add").val(),
            'direction' : $("#direction_add").val(),
            'expectCity' : $("#expectCity_add").val()
          }),
          dataType:'json',
          contentType: 'application/json',
          // header:{
          //   'Authorization':token
          // },
          // beforeSend : function(request) {
          //   request.setRequestHeader("Authorization",token );
          // },
          success:(data)=>{
            if(data.code === 20000){
              $("#add_frame").modal('hide');
              lightyear.loading('hide');
              lightyear.notify('保存成功~', 'success', 3000);
              $('#tb_students').bootstrapTable('refresh', {pageSize:this.pageSize});
            }
          }
        })
    });

    $("#btn_delete").click(()=>{
      let rows = $("#tb_students").bootstrapTable("getAllSelections");
      if(rows.length<=0){
        lightyear.notify('请至少选择一条数据~', 'warning', 1000);
      }else{
        let ids = "";
        let studentNames = "";
        $.each(rows,(index,value)=>{
          ids += value.id + "-";
          studentNames += value.studentName + ",";
        });
        ids = ids.substring(0,ids.length-1);
        studentNames = studentNames.substring(0,studentNames.length-1);
        $.confirm({
          title: '请注意',
          content: '你确定要删除学生姓名为'+studentNames+' 的学生吗?',
          type: 'red',
          buttons: {
            confirm: {
              text: '确认删除',
              btnClass: 'btn-primary',
              action: ()=>{
                lightyear.loading('show');
                $.ajax({
                  type: 'DELETE',
                  url: '/ssm/student/student/'+ ids,
                  dataType: 'json',
                  success:(data)=>{
                    if(data.code === 20000){
                      lightyear.loading('hide');
                      lightyear.notify('删除用户成功~', 'success', 3000);
                      $('#tb_students').bootstrapTable('refresh', {pageSize:this.pageSize});
                    }
                  }
                })
              }
            },
            cancel: {
              text: '取消删除'
            }
          }
        });
      };
    })


$('#tb_students').bootstrapTable({
    classes: 'table table-bordered table-hover table-striped',
    url: '/ssm/student/student/page',
    method: 'get',
    dataType : 'json',        // 因为本示例中是跨域的调用,所以涉及到ajax都采用jsonp,
    uniqueId: 'id',            // 为每一行指示唯一的标识符。
    idField: 'id',             // 指明哪个字段将用作复选框/单选框值，与selectItemName对应。
    toolbar: '#toolbar',       // 工具按钮容器 jQuery选择指示工具栏，例如： #toolbar, .toolbar，或DOM节点。
    //clickToSelect: true,     // 是否启用点击选中行
    showColumns: true,         // 是否显示所有的列
    showRefresh: true,         // 是否显示刷新按钮
    
    //showToggle: true,        // 是否显示详细视图和列表视图的切换按钮(clickToSelect同时设置为true时点击会报错)

    pagination: true,                    // 是否显示分页
    sortOrder: "asc",                    // 排序方式

    sidePagination: "server",            // 分页方式：client客户端分页，server服务端分页
    pageNumber: 1,                       // 初始化加载第一页，默认第一页
    pageSize: 10,                        // 每页的记录行数
    pageList: [10, 25, 50, 100],         // 可供选择的每页的行数
    //search: true,                      // 是否显示表格搜索，此搜索是客户端搜索
    ajaxOptions:{
      header:{
        'Authorization':token
      },
      beforeSend : function(request) {
        request.setRequestHeader("Authorization",token );
      }
    },
    queryParamsType: '',
    queryParams: function(params) { // 传递参数
      var temp = {
        pageNum: params.pageNumber,
        pageSize: params.pageSize,
        studentName: student.studentName,
        studentSex: student.studentSex,
        studentPhone: student.studentPhone,
        studentSchool: student.studentSchool,
        studentMajor : student.studentMajor,
        studentGrade : student.studentGrade,
        direction : student.direction,
        expectCity: student.expectCity
      };
      return temp;
    },
    responseHandler:function (res){
      let nres = [];
      nres.push({total:res.data.pageInfo.total,rows:res.data.pageInfo.list})
      return nres[0];
    },

  //showExport: true,        // 是否显示导出按钮, 导出功能需要导出插件支持(tableexport.min.js)
    //exportDataType: "basic", // 导出数据类型, 'basic':当前页, 'all':所有数据, 'selected':选中的数据
  
    columns: [{
        checkbox: true    // 是否显示复选框
    }, {
        field: 'id',
        title: 'ID',
        sortable: true    // 是否排序
    }, {
        field: 'studentName',
        title: '学生姓名',
      editable: {
          type: 'text',
          title: '学生姓名'
      }
    },  {
      field: 'studentSex',
      title: '学生性别',
      editable: {
        type: 'select',
        title: "学生性别",
        source: [
          { value: 0, text: '男'},
          { value: 1, text: '女'}
        ],
        noeditFormatter: function (value, row, index) {
          var result;
          if (value == '0') {
            result = { filed: "studentSex", value: "男", class: "label label-info" };
          } else if (value == '1') {
            result = { filed: "studentSex", value: "女", class: "label label-pink" };
          }

          return result; // 这里对bootstrap-table-editable.min.js做了一些修改，让其能接收class
        },
        highlight: false
      }
    }
    , {
        field: 'studentPhone',
        title: '学生电话',
      editable: {
        type: 'text',
        title: '学生电话'
      }
    }, {
        field: 'studentSchool',
        title: '学生学校',
        editable: {
          type: 'text',
          title: '学生学校'
        }
      }, {
        field: 'studentMajor',
        title: '学生专业',
        editable: {
          type: 'text',
          title: '学生专业'
        }
      }, {
        field: 'studentGrade',
        title: '学生届数',
        editable: {
          type: 'select',
          title: '学生届数',
          source: [
            { value: '2018', text: '2018'},
            { value: '2019', text: '2019'},
            { value: '2020', text: '2020'}
          ]
        }
      }, {
        field: 'direction',
        title: '发展方向',
      editable: {
        type: 'select',
        title: "发展方向",
        source: [
          { value: 0, text: '考研'},
          { value: 1, text: '考公务员'},
          { value: 2, text: '就业'}
        ],
        Formatter:(val,row,index)=>{
          let result;
          if(val===0){
            result = { filed: "direction", value: "考研"}
          }else if (val===1){
            result = { filed: "direction", value: "考公务员"}
          }else if (val ===2){
            result = { filed: "direction", value: "就业"}
          }
          return result
        }
      }
    }, {
        field: 'expectCity',
        title: '期望就业城市',
        editable: {
          type: 'text',
          title: '期望就业城市'
        }
      },{
        field: 'createTime',
        title: '创建时间'
      }, {
        field: 'updateTime',
        title: '修改时间'
      }, {
        field: 'operate',
        title: '操作',
        formatter: btnGroup,  // 自定义方法
        events: {
            'click .edit-btn': function (event, value, row, index) {
                editUser(row);
            },
            'click .del-btn': function (event, value, row, index) {
              delStudent(row);
            },
            'click .show-btn': function (event, value, row, index) {
                showUser(row);
            }
        }
    }],

    onEditableSave: function (field, row, oldValue, $el) {
      console.log(row)
      lightyear.loading('show');
        $.ajax({
            // type: "post",
            type: 'PUT',
            url: "/ssm/student/student",
            // data: {
            //   id: row.id,
            //   username: row.username,
            //   realName: row.realName,
            //   status: row.status,
            //   _method : "put"
            // },
            data: JSON.stringify({
              "id" : row.id,
              "studentName" : row.studentName,
              "studentSex" : row.studentSex,
              'studentPhone' : row.studentPhone,
              "studentSchool" : row.studentSchool,
              "studentMajor" : row.studentMajor,
              "studentGrade" : row.studentGrade,
              "direction" : row.direction,
              "expectCity" : row.expectCity
            }),
            dataType: 'json',
            contentType: 'application/json',
            success: function (data, status) {
                if (data.code === 20000) {
                    // 这里的状态显示有自定义样式区分，做单行的更新
                    // $('#tb_users').bootstrapTable('updateRow', {row: data.data.user, replace: true});
                    lightyear.loading('hide');
                    lightyear.notify('修改成功~', 'success', 3000);
                    $('#tb_students').bootstrapTable('refresh', {pageSize:this.pageSize});
                } else {
                    lightyear.loading('hide');
                    lightyear.notify('修改失败~', 'danger', 100);
                    // $('#tb_users').bootstrapTable('refresh', {pageSize:10});
                }
            },
            error: function () {
                lightyear.loading('hide');
                lightyear.notify('服务器错误，请稍后再试~', 'danger', 100);
                $('#tb_students').bootstrapTable('refresh', {pageSize:10});
            }
        });
    },

    onLoadSuccess: function(data){
        $("[data-toggle='tooltip']").tooltip();
    }
});

// 操作按钮
function btnGroup ()
{
    let html =
        '<a href="#!" class="btn btn-xs btn-default m-r-5 edit-btn" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>' +
        '<a href="#!" class="btn btn-xs btn-default m-r-5 show-btn" title="查看" data-toggle="tooltip"><i class="mdi mdi-eye"></i></a>' +
        '<a href="#!" class="btn btn-xs btn-default del-btn" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>';
    return html;
}

// 操作方法 - 编辑
function editUser()
{
    alert('编辑信息跳转');
}
// 操作方法 - 删除
function delStudent(row)
{
  $.confirm({
    title: '请注意',
    content: '你确定要删除学生姓名为 '+row.studentName+' 的学生吗?',
    type: 'red',
    buttons: {
      confirm: {
        text: '确认删除',
        btnClass: 'btn-primary',
        action: ()=>{
          lightyear.loading('show');
          $.ajax({
            type: 'DELETE',
            url: '/ssm/student/student/'+ row.id,
            dataType: 'json',
            success:(data)=>{
              if(data.code === 20000){
                lightyear.loading('hide');
                lightyear.notify('删除成功~', 'success', 3000);
                $('#tb_students').bootstrapTable('refresh', {pageSize:this.pageSize});
              }
            }
          });
        }
      },
      cancel: {
        text: '取消删除'
      }
    }
  });

}
// 操作方法 - 查看
function showUser()
{
    alert('查看详细');
}
</script>


</body>
</html>